<template>
	<div>
		<el-tabs v-model="current" tab-position="left">
			<el-tab-pane name="0" label="企业微信">
				<el-form ref="weComForm" :model="weComForm" style="width: 80%; min-width: 800px" label-width="140px">
					<el-form-item label="是否开启" prop="isShow">
						<el-switch active-value="1" inactive-value="2" v-model="weComForm.paramMap.isShow" autocomplete="off"></el-switch>
					</el-form-item>
					<el-form-item label="企业微信企业id" prop="clientId">
						<el-input v-model="weComForm.paramMap.clientId" autocomplete="off" placeholder="请输入clientId"></el-input>
					</el-form-item>
					<el-form-item label="企业微信应用id" prop="企业微信应用id">
						<el-input v-model="weComForm.paramMap.agentId" autocomplete="off" placeholder="请输入agentId"></el-input>
					</el-form-item>
					<el-form-item label="企业微信应用secret" prop="agentSecret">
						<el-input v-model="weComForm.paramMap.agentSecret" autocomplete="off" placeholder="请输入agentSecret"></el-input>
					</el-form-item>
          <el-form-item label="页面URL" prop="frontUrl">
            <el-input v-model="weComForm.paramMap.frontUrl" autocomplete="off" placeholder="请输入页面URL"></el-input>
          </el-form-item>
					<el-form-item label="是否启用同步" prop="syncStatus">
						<el-switch
							active-value="1"
							inactive-value="2"
							v-model="weComForm.paramMap.syncStatus"
							autocomplete="off"
						></el-switch>
					</el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane name="1" label="钉钉">
				<el-form ref="dingForm" :model="dingForm" style="width: 80%; min-width: 800px" label-width="120px">
					<el-form-item label="是否开启" prop="isShow">
						<el-switch active-value="1" inactive-value="2" v-model="dingForm.paramMap.isShow" autocomplete="off"></el-switch>
					</el-form-item>

          <el-form-item label="appKey" prop="appKey">
            <el-input v-model="dingForm.paramMap.appKey" autocomplete="off" placeholder="请输入appKey"></el-input>
          </el-form-item>
          <el-form-item label="appSecret" prop="appSecret">
            <el-input v-model="dingForm.paramMap.appSecret" autocomplete="off" placeholder="请输入appSecret"></el-input>
          </el-form-item>
          <el-form-item label="agentId" prop="agentId">
            <el-input v-model="dingForm.paramMap.agentId" autocomplete="off" placeholder="请输入agentId"></el-input>
          </el-form-item>

          <el-form-item label="登录应用AppId" prop="loginAppId">
            <el-input v-model="dingForm.paramMap.loginAppId" autocomplete="off" placeholder="请输入登录应用AppId"></el-input>
          </el-form-item>
          <el-form-item label="登录应用AppSecret" prop="loginAppSecret">
            <el-input v-model="dingForm.paramMap.loginAppSecret" autocomplete="off" placeholder="请输入登录应用AppSecret"></el-input>
          </el-form-item>
          <el-form-item label="登录回调URL" prop="backUrl">
            <el-input v-model="dingForm.paramMap.backUrl" autocomplete="off" placeholder="请输入登录回调地址"></el-input>
          </el-form-item>


          <el-form-item label="后台地址" prop="url">
            <el-input v-model="dingForm.paramMap.url" autocomplete="off" placeholder="请输入后台URL"></el-input>
          </el-form-item>
          <el-form-item label="页面URL" prop="frontUrl">
            <el-input v-model="dingForm.paramMap.frontUrl" autocomplete="off" placeholder="请输入页面URL"></el-input>
          </el-form-item>

          <el-form-item label="是否启用同步" prop="syncStatus">
            <el-switch
                active-value="1"
                inactive-value="2"
                v-model="dingForm.paramMap.syncStatus"
                autocomplete="off"
            ></el-switch>
          </el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane name="2" label="微信">
				<el-tag
					:type="item.type"
					closable
					@close="onclose(index)"
					style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; margin-left: 25px; margin-right: 25px;"
					v-for="(item, index) in tag"
					:key="index"
				>
					{{ item.text }}
				</el-tag>
				<el-form ref="wechatForm" :model="wechatForm" :rules="wechatRule" style="width: 80%; min-width: 800px" label-width="140px">
					<el-form-item label="是否开启" prop="isShow">
						<el-switch active-value="1" inactive-value="2" v-model="wechatForm.paramMap.isShow" autocomplete="off"></el-switch>
					</el-form-item>
					<el-form-item label="AppID" prop="appId">
						<el-input v-model="wechatForm.paramMap.appid" autocomplete="off" placeholder="请输入AppID"></el-input>
					</el-form-item>
					<el-form-item label="AppSecret" prop="secret">
						<el-input v-model="wechatForm.paramMap.secret" autocomplete="off" placeholder="请输入AppSecret"></el-input>
					</el-form-item>
					<el-form-item label="页面URL" prop="frontUrl">
						<el-input v-model="wechatForm.paramMap.frontUrl" autocomplete="off" placeholder="请输入页面URL"></el-input>
					</el-form-item>
					<el-form-item label="后台地址" prop="url">
						<el-input v-model="wechatForm.paramMap.url" autocomplete="off" placeholder="请输入后台URL"></el-input>
					</el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane name="3" label="QQ">
				<el-form ref="qqForm" :model="qqForm" style="width: 80%; min-width: 800px" label-width="140px">
					<el-form-item label="是否开启" prop="isShow">
						<el-switch active-value="1" inactive-value="2" v-model="qqForm.paramMap.isShow" autocomplete="off"></el-switch>
					</el-form-item>
					<el-form-item label="AppID" prop="appId">
						<el-input v-model="qqForm.paramMap.appid" autocomplete="off" placeholder="请输入AppID"></el-input>
					</el-form-item>
					<el-form-item label="AppSecret" prop="secret">
						<el-input v-model="qqForm.paramMap.secret" autocomplete="off" placeholder="请输入AppSecret"></el-input>
					</el-form-item>
					<el-form-item label="登录回调地址" prop="url">
						<el-input v-model="qqForm.paramMap.url" autocomplete="off" placeholder="请输入登录回调地址"></el-input>
					</el-form-item>
					<el-form-item label="绑定回调地址" prop="bindUrl">
						<el-input v-model="qqForm.paramMap.bindUrl" autocomplete="off" placeholder="请输入绑定回调地址"></el-input>
					</el-form-item>
					<el-form-item label="页面URL" prop="frontUrl">
						<el-input v-model="qqForm.paramMap.frontUrl" autocomplete="off" placeholder="请输入页面URL"></el-input>
					</el-form-item>
				</el-form>
			</el-tab-pane>
		</el-tabs>
		<el-button type="primary" @click="onSubmit">保存</el-button>
	</div>
</template>

<script>
import request from "@/common/request"
export default {
	data() {
		return {
			current: "0",
			formData: {},
			dingForm: {
				bindCode: "DING_LOGIN",
				bindDetail: "",
				groupCode: "",
				id: "",
				paramMap: {
          appKey:"",
          appSecret:"",
          agentId:"",
          loginAppId:"",
          loginAppSecret:"",
          url:"",
          frontUrl:"",
          backUrl:"",
          isShow:"",
          syncStatus: "",
				},
			},
			qqForm: {
				bindCode: "QQ_LOGIN",
				bindDetail: "",
				groupCode: "",
				id: "",
				paramMap: {
					isShow: "",
					appid: "",
					secret: "",
					url: "",
          bindUrl: "",
					frontUrl: "",
				},
			},
			weComForm: {
				bindCode: "SELF_WECOM",
				bindDetail: "",
				groupCode: "",
				id: "",
				paramMap: {
					clientId: "",
					agentId: "",
					agentSecret: "",
					syncStatus: "",
					isShow: "",
          frontUrl:"",
				},
			},
			wechatForm: {
				bindCode: "WX_LOGIN",
				bindDetail: "",
				groupCode: "",
				id: "",
				paramMap: {
					appid: "",
					secret: "",
					url: "",
					frontUrl: "",
					isShow: "",
				},
			},
			wechatRule: {
				"paramMap.appid": [{ required: true, message: "请输入AppID", trigger: "blur" }],
				"paramMap.secret": [{ required: true, message: "请输入AppSecret", trigger: "blur" }],
				"paramMap.url": [{ required: true, message: "请输入回调页面", trigger: "blur" }],
			},
			tag: [
				{
					type: "primary",
					text: "微信登录需要先申请网站应用。申请网址：https://open.weixin.qq.com",
				},
			],
		}
	},
	created() {
		this.getData()
	},
	methods: {
		async getData() {
			const { data } = await request("get", "/system/configApi/list")
			const qiwei = data.find(item => item.bindCode === "SELF_WECOM")
			const wechat = data.find(item => item.bindCode === "WX_LOGIN")
			const qqData = data.find(item => item.bindCode === "QQ_LOGIN")
			const dingData = data.find(item => item.bindCode === "DING_LOGIN")
			if (qiwei) {
				this.weComForm = {
					bindCode: "SELF_WECOM",
					bindDetail: qiwei.bindDetail,
					groupCode: qiwei.groupCode,
					id: qiwei.id,
					paramMap: {
						isShow: qiwei.paramMap ? qiwei.paramMap.isShow : "2",
						clientId: qiwei.paramMap ? qiwei.paramMap.clientId : "",
						agentId: qiwei.paramMap ? qiwei.paramMap.agentId : "",
						agentSecret: qiwei.paramMap ? qiwei.paramMap.agentSecret : "",
						syncStatus: qiwei.paramMap ? qiwei.paramMap.syncStatus : "",
            frontUrl: qiwei.paramMap.frontUrl,
					},
				}
			}
			if (wechat) {
				this.wechatForm = {
					bindCode: "WX_LOGIN",
					bindDetail: wechat.bindDetail,
					groupCode: wechat.groupCode,
					id: wechat.id,
					paramMap: {
						isShow: wechat.paramMap ? wechat.paramMap.isShow : "2",
						appid: wechat.paramMap.appid,
						secret: wechat.paramMap.secret,
						url: wechat.paramMap.url,
						frontUrl: wechat.paramMap.frontUrl,
					},
				}
			}
			if (qqData) {
				this.qqForm = {
					bindCode: "QQ_LOGIN",
					bindDetail: qqData.bindDetail,
					groupCode: qqData.groupCode,
					id: qqData.id,
					paramMap: {
						isShow: qqData.paramMap ? qqData.paramMap.isShow : "2",
						appid: qqData.paramMap.appid,
						secret: qqData.paramMap.secret,
						url: qqData.paramMap.url,
						frontUrl: qqData.paramMap.frontUrl,
					},
				}
			}
			if (dingData) {
				this.dingForm = {
					bindCode: "DING_LOGIN",
					bindDetail: dingData.bindDetail,
					groupCode: dingData.groupCode,
					id: dingData.id,
					paramMap: {
						isShow: dingData.paramMap ? dingData.paramMap.isShow : "2",
            appKey:dingData.paramMap.appKey,
            appSecret:dingData.paramMap.appSecret,
            agentId:dingData.paramMap.agentId,
            loginAppId:dingData.paramMap.loginAppId,
            loginAppSecret:dingData.paramMap.loginAppSecret,
            url:dingData.paramMap.url,
            frontUrl:dingData.paramMap.frontUrl,
            backUrl:dingData.paramMap.backUrl,
            syncStatus: dingData.paramMap ? dingData.paramMap.syncStatus : "",
					},
				}
			}
		},
		async onSubmit() {
			const formData = [this.weComForm, this.dingForm, this.wechatForm, this.qqForm][this.current]
			if (formData.paramMap.isShow == 1) {
				if (Object.values(formData.paramMap).some(value => !value)) {
					this.$message.error("请填写完整信息")
					return
				}
			}
			formData.bindDetail = JSON.stringify(formData.paramMap)
			const { code, msg } = await request("post", "/system/configApi/edit", formData)
			if (code === 0) {
				this.$message.success("保存成功")
			} else {
				this.$message.error(msg)
			}
		},
	},
}
</script>

<style lang="scss" scoped></style>
